<template>
  <div>
    <el-menu
      :default-active="menuList.active"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#2d3a4b"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item :index="item.name" v-for="(item, ind) in menuList.data" :key="ind" @click="menuClick(item)">
        <el-icon class="icon-class"><icon-menu /></el-icon>
        <template #title>{{ item.meta.title }}</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue'
  import { Menu as IconMenu } from '@element-plus/icons'
  import { useRouter, useRoute } from 'vue-router'
  export default defineComponent({
    components: {
      IconMenu
    },
    props: {
      isCollapse: {
        type: Boolean,
        default: false
      }
    },
    setup(props) {
      const router = useRouter()
      const route = useRoute()
      const menuList = reactive({
        data: router.options.routes[2].children,
        active: route.name
      })
      const menuClick = (list: any) => {
        router.push({ name: list.name })
      }
      return {
        ...toRefs(props),
        menuList,
        menuClick
      }
    }
  })
</script>
]
<style lang="scss" scoped>
  .icon-class {
    margin: -4px 4px 0 4px;
    font-size: 16px;
  }
</style>
<style>
  .el-menu--collapse {
    border: 0 !important;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    border: 0 !important;
  }
</style>
